<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 300px;
            height: 30px;
            background-color: #ddd;
        }

        span {
            background-color: #ff0;
            padding: 0 10px;
        }
    </style>
</head>

<body>

    <!-- 
        标签分类
            块级标签  block element(元素)
            行内标签(内联标签)  inline  element
            行内块级标签  inline-block element



        块级标签：
            独占一行   div  p   h1-h6   ul  ol   dl  dt  dd  li  
            主要是作为容器使用
            宽度会继承 ， 支持所有的css属性
            margin：auto + 宽度   实现居中

        
        行内标签(内联元素)
            左右排列  a  span  b del  u  i  em  strong ...
            辅助标签
            宽度由内容撑开的，不支持宽高  也不支持上下的margin ， 上下的padding只能把背景和边框撑开但是不占位置

        
        行内块级标签(内联块级元素)
            img
            左右排列的，又支持宽高

     -->


    <span>111</span>
    <div>啊啊啊啊啊啊啊啊<span>1</span>啊啊啊啊啊</div>

    <img src="" alt="">

</body>

</html>